<!--
 * new page
 * @author: sunYihui
 * @since: 2024-08-30
 * NewsView.vue
-->
<template>
  <div class="body">
    <div class="title">公告列表</div>
    <Table ref="userTable" v-bind="tableConfig">
      <template #search="{ searchSubmit, params }">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input style="width:150px" v-model="params.key" placeholder="搜索关键字" clearable />
          </el-form-item>
          <el-form-item label="地址">
            <el-input style="width:150px" v-model="params.address" placeholder="请输入地址" clearable />
          </el-form-item>
          <el-form-item label="电话">
            <el-input style="width:150px" v-model="params.tel" placeholder="请输入电话" clearable />
          </el-form-item>
          <el-form-item label="时间查询">
            <el-date-picker v-model="dateValue" @change="(e: any) => dateChange(e, params)" value-format="YYYY-MM-DD"
              type="daterange" range-separator="至" start-placeholder="起始日期" end-placeholder="截止日期" />
          </el-form-item>
          <el-form-item label="报修状态">
            <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态">
              <el-option label="处理完成" value="3" />
              <el-option label="正在处理" value="2" />
              <el-option label="等待处理" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="报修类型">
            <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择类型">
              <el-option label="租户2" value="2" />
              <el-option label="业主1" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="居民">
            <el-input style="width:150px" v-model="params.userid" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item>
            <el-button class="search" type="primary" @click="searchSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- 分类 -->
      <template #type="{ scope }">
        <div v-for="item in TypeList" :key="item.id">
          <div v-if="scope.row.type == item.id">{{ item.name }}</div>
        </div>
      </template>
      <template #state="{ scope }">
        <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0" @change="stateChange(scope.row)"/>
        <span :class="{blue: scope.row.state==1,red: scope.row.state==0}">{{ scope.row.state==1?'显示':'隐藏' }}</span>
      </template>
      <template #title="{scope }">
        <el-button link @click="show(scope.row.id)" type="primary" >{{scope.row.title}}</el-button>
      </template>
      <template #buttons="{ deleteAllHandle }">
        <el-button @click="addTo" type="primary">添加</el-button>
        <el-button class="del" @click="deleteAllHandle" type="danger">批量删除</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)" type="primary">修改</el-button>
        <el-button class="delete" @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
    </Table>
    <Detail :id="showId" @close="closeHandle" v-if="dialogVisible"></Detail>
  </div>
</template>
<script lang='ts' setup>
import Detail from '../../components/news/Details.vue'
import Table from '../../components/table/TableView.vue'
import { tableConfig } from './NewsView'
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router';
import {add} from '../../service/news/news'
import {ElMessage} from 'element-plus'
const dialogVisible=ref(false);
const showId=ref(0);
//显示详情
const show=(id:number)=>{
   dialogVisible.value=true;
   showId.value=id;
}
const closeHandle=()=>{
    dialogVisible.value=false;
}

const stateChange=(val:any)=>{
  console.log(val);
  getadd(val)
  
}

const getadd=async(val:any)=>{  
  let res:any=await add(val)
  console.log(res);
  if(res.errCode==10000){
    ElMessage.success("状态修改成功")
  }
}

const router = useRouter();
const edit = (data: any) => {
  console.log(data);
  router.push("/newsadd/" + data.id);
}
const addTo = () => {
  router.push("/newsadd/0");
}
//通过ref获取表格实例来调用写在表格里面的方法
const userTable = ref<any>();
const dateValue = ref("");
const dateChange = (e: any, params: any) => {
  if (e == null) {
    params.begindate = null;
    params.enddate = null;
  }else {
    params.begindate = e[0];
    params.enddate = e[1];
  }
}
let TypeList: any = reactive([])
//获取公告列表
import { getUserTypeList } from '../../service/news/news';
import { reactive } from 'vue';
const getList = async () => {
  let res = await getUserTypeList();
   TypeList=res.data.list
  console.log(TypeList);
}


onMounted(() => {
  getList()
  
})

</script>
<style scoped lang="less">
@import url(../../assets/styles/baseCss/base.css);
.blue{
  color: rgb(64, 158, 255);
}
</style>